<template>
  <video :style="{ height: height, width: width }" :id="id" muted></video>
</template>
<script>
import flvjs from 'flv.js'

export default {
  name: 'flvPlayer',
  props: {
    id: {
      type: String,
      default: 'player'
    },
    url: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      player: null
    }
  },
  mounted () {
    this.start_play_live()
  },
  watch: {
    url () {
      this.start_play_live()
    }
  },
  methods: {
    start_play_live () {
      this.stopPlayers()
      this.player = flvjs.createPlayer({
        type: 'flv',
        url: this.url
      })
      this.player.attachMediaElement(document.getElementById(this.id))
      this.player.load()
      this.player.play()
    },
    stopPlayers () {
      if (this.player) {
        this.player.destroy()
        this.player = null
      }
    }
  }
}
</script>

<style scoped>
video {
  object-fit: fill;
}
</style>
